<template>
  <div>
         <div class="row">
        <span>奖品设置（{{index+1}}）</span>
        <span @click="deleteAward">删除</span>
      </div>
      <div class="awardSet">
        <p>
          <label>奖品名称</label>
          <input
            v-model="form.awardName"
            class="inputK"
            mode="wrapped"
            maxlength="6"
            placeholder="最多可输入6个字"
          />
        </p>
        <p>
          <label>奖品</label>
          <span @click="chooseType">请选择</span>
        </p>
        <p>图片</p>
        <p>
          <label>数量</label>
          <input
            v-model="form.awardNumber"
            class="inputK"
            mode="wrapped"
            maxlength="6"
            placeholder="请输入奖品数量"
          />
        </p>
        <p>
          <label>中奖概率%</label>
          <input
            v-model="form.awardNumber"
            class="inputK"
            mode="wrapped"
            maxlength="6"
            placeholder="0~100%"
          />
        </p>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      required: true
    },
    items: {
      type: Array,
      default: Array
    }
  },
  data () {
    return {
      form: {}
    }
  },
  watch: {
    form: {
      handler (newV, oldV) {
        // if (newV.awardName.length === 0) {
        //   return false
        // }
        // if (newV.awardNumber.length === 0) {
        //   return false
        // }
        this.$emit('uploadData', { index: this.index, data: newV })
      },
      deep: true
    },
    items: {
      handler (newV, oldV) {
        if (newV.length !== 0) {
          this.form = { ...newV[this.index] }
        }
      },
      deep: true
    }
  },
  methods: {
    deleteAward: function () {
      this.$emit('deleteIndex', this.index)
    }
  }
}
</script>
